<template>
	<view>
		<u-navbar :is-back="false" title="积分商城" :border-bottom="false" :background="background" immersive></u-navbar>
		<view class="top-box">
			<view class="top-mask"></view>
		</view>
		<view class="content-box mx-30 flex items-center justify-between">
			<view>
				<view class="">
					<view class="font-30">当前积分</view>
					<view class="font-58 font-bold my-4">{{ integral }}</view>
					<view class="font-24" hover-class="hover-class" hover-stay-time="150">
						<text style="color: #999;">积分账单</text>
						<u-icon size="21" color="#999" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<u-image width="300" src="/static/images/integral.png" mode="widthFix"></u-image>
		</view>
		<u-sticky>
			<u-tabs :list="tabList" active-color="#333" :bar-style="{background: '#2979ff'}" :current="current"
				@change="change" />
		</u-sticky>
		<view class="mx-30 flex flex-wrap justify-between">
			<template v-if="tabList[current].name == '储蓄兑换'">
				<view class="list-box my-16" v-for="(item, index) in integralData" :key="index" @tap="integralShowClick(item)"
					hover-class="hover-class" hover-stay-time="150">
					<u-image border-radius="16" width="330" height="360" :src="$ut.setImgae(item.shopInfo.image)"
						mode="aspectFill"></u-image>
					<view class="line-1 font-30 font-bold mt-6">{{item.shopInfo.name}}兑换券</view>
					<view class="integarl my-4">{{item.integral}}</view>
					<view class="font-24">
						<text>价值: </text>
						<text class="price font-24">{{ item.price }}</text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="list-box my-16" v-for="(item, index) in goodsList" :key="index" @tap="navToDetails(item)"
					hover-class="hover-class" hover-stay-time="150">
					<u-image border-radius="16" width="330" height="360" :src="$ut.setImgae(item.image)"
						mode="aspectFill"></u-image>
					<view class="line-1 font-30 font-bold mt-6">{{item.name}}</view>
					<view class="integarl my-4">{{item.integral}}</view>
					<view v-if="goodsList.length == current + 1" class="underlined-price">20.0</view>
				</view>
			</template>
		</view>
		<u-modal v-model="integralShow" :content="integralContent" show-cancel-button
			@confirm="addIntegralExchangeSaveRecord"></u-modal>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	export default {
		data() {
			return {
				tabList: [{
					name: '热兑推荐'
				}, {
					name: '积分可兑'
				}, {
					name: '数字会员'
				}],
				current: 0,
				commodityTypeId: null,
				integral: 0,
				background: {
					background: 'rgba(0,0,0,0)'
				},
				goodsList: [],
				integralData: [],
				// 选中的积分兑换
				currentIntegralInfo: {},
				integralContent: '',
				integralShow: false,
				page: 0,
				loading: false,
				loadMore: true
			}
		},
		computed: {
			...mapState(['userInfo','schoolInfo']),
			status() {
				if (this.loadMore == false) {
					return "noMore";
				} else if (this.loading) {
					return "loading";
				} else {
					return "more";
				}
			}
		},
		onReachBottom() {
			this.getIntegralCommodityUser();
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			const scrollTop = e.scrollTop;
			const num = 120;
			if (e.scrollTop >= num) {
				this.background = {
					background: 'rgba(255, 2525, 255, 1)'
				}
			} else if (e.scrollTop < num) {
				this.background = {
					background: 'rgba(0,0,0, 0)'
				}
			}
		},
		onShow() {
			this.getIntegralCommodityTypeUser();
			this.getIntegralExchangeSaveUser();
			this.getUserInfo();
		},
		methods: {
			...mapMutations(['updateUserInfo']),
			// 跳转详情页
			navToDetails(item) {
				const goodsInfo = encodeURIComponent(JSON.stringify(item));
				this.$ut.route('pages/integral/details', {
					goodsInfo
				});
			},
			// 获取积分额度
			getIntegralExchangeSaveUser() {
				this.$u.api.getIntegralExchangeSaveUser({
					schoolId: this.schoolInfo.id
				}).then(res => {
					this.integralData = res.dataList;
				})
			},
			// 兑换前处理
			integralShowClick(item) {
				const {
					shopInfo,
					price,
					integral
				} = item;
				this.currentIntegralInfo = item;
				this.integralContent = `您将使用${integral}兑换${shopInfo.name}店铺价值为${price}元的储蓄券`;
				this.integralShow = true;
			},
			// 进行积分兑换
			addIntegralExchangeSaveRecord() {
				const integralInfo = {...this.currentIntegralInfo};
				delete integralInfo.id;
				const data = {
					...integralInfo,
					userId: this.userInfo.id
				}
				this.$u.api.addIntegralExchangeSaveRecord(data).then(res => {
					this.getUserInfo('update');
				})
			},
			// 获取用户信息
			async getUserInfo(type = 'get') {
				const data = await this.$u.api.getUserInfo({
					id: this.userInfo.id
				});
				this.integral = data.dataList[0].integral;
				if(type == 'update') {
					uni.showToast({
						title: '积分兑换成功'
					})
					this.updateUserInfo(data.dataList[0]);
				}
			},
			// 获取积分商品分类
			getIntegralCommodityTypeUser() {
				this.$u.api.getIntegralCommodityTypeUser({
					schoolId: this.schoolInfo.id
				}).then(res => {
					this.tabList = res.dataList;
					if (this.tabList.length > 0) this.commodityTypeId = this.tabList[this.current].id;
					this.getIntegralCommodityUser();
				})
			},
			getIntegralCommodityUser() {
				if (this.loading || !this.loadMore) {
					return false;
				} else {
					this.loading = true;
					this.page += 1;
					this.$u.api.getIntegralCommodityUser({
							schoolId: this.schoolInfo.id,
							commodityTypeId: this.commodityTypeId,
							page: this.page,
							limit: 10,
						}).then(res => {
							const {
								dataList,
								total
							} = res;
							this.goodsList = this.goodsList.concat(dataList);
							if (total <= this.goodsList.length) this.loadMore = false;
							this.loading = false;
						})
						.catch(() => {
							this.loading = false;
							this.page -= 1;
						});
				}
			},
			change(index) {
				this.current = index;
				this.page = 0;
				this.goodsList = [];
				this.loading = false;
				this.loadMore = true;
				this.commodityTypeId = this.tabList[this.current].id
				this.getIntegralCommodityUser();
			}
		}
	}
</script>

<style lang="scss">
	.top-box {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(to right, #fef3f5, #e8f1ff);
		position: fixed;
		z-index: -1;

		.top-mask {
			position: absolute;
			width: 100%;
			height: 300rpx;
			background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
		}
	}

	.content-box {
		padding-top: 80rpx;
	}

	.list-box {
		width: 330rpx;

		.integarl {
			color: $font-color-spec;
			font-size: 36rpx;
			font-weight: bold;

			&::after {
				content: '积分';
				color: #333;
				font-size: 24rpx;
				font-weight: 400;
				margin-left: 12rpx;
			}
		}

		.underlined-price {
			text-decoration: line-through;
			color: #999;
			font-size: 24rpx;

			&::before {
				content: '¥';
				font-size: 24rpx;
			}
		}
	}
</style>